<template>
  <div class="shangpinguanli">
    <left></left>
    <div class="right">
      <div
        style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;"
        class="flexbc"
      >
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
        </el-breadcrumb>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <!-- <div class="flexc" style="background: #fff; width: 790px; height: 50px; background: rgb(255, 255, 255); border-radius: 25px; padding: 15px 20px;">
          <div style="margin-right: 15px;"><img src="../../../static/img/index2.png" style="width: 18px;"></div>
          <div>开发中.</div>
        </div>-->
        <div>
          <img
            src="../../../static/img/guanggao.jpg"
            @click="log = true"
            style="cursor: pointer; max-width: 100%; border-radius: 20px;"
          />
        </div>
        <div
          v-if="this.pagenumShow"
          style="cursor:pointer;max-width: 100%; border-radius: 20px;background:red;margin-top:27px;height: 50px;background-color:#FFF1F0;border: 0.5px solid #FFA39E;display:flex;align-items: center;justify-content:space-between"
          @click="clickKucun"
        >
          <div style="display: flex;align-items:center">
            <span>
              <img src="../../../static/img/cha.png" style="margin-left: 18px" />
            </span>
            <span style="margin-left:8px;font-size:16px;font-weight:bold;">
              库存警告：有
              <span style="color:rgb(255, 77, 79);">{{pagenum}}</span>个商品库存不足
            </span>
          </div>
          <div style="color:#1890FF;font-size:14px;font-weight:700;margin-right:20px">查看详情</div>
        </div>
        <div class="flexbc">
          <div
            class="flexc"
            style="background: #fff; background: rgb(255, 255, 255); border-radius: 25px; padding: 25px 20px; margin-top: 40px; width: 480px;"
          >
            <div>
              <img src="../../../static/img/shouye2.png" style="width: 50px;" />
            </div>
            <div style="margin-left: 50px;">
              <el-button type="primary" plain round @click="go('/weixiaodian')">编辑微小店</el-button>
            </div>
            <div style="margin-left: 20px;">
              <el-button type="primary" round @click="openw2()">进入微小店</el-button>
            </div>
          </div>
          <div
            style="width: 100px; height: 100px; background: rgb(255, 255, 255);border-radius: 20px; margin-left: 20px; cursor: pointer;"
            class="flexcc"
            @click="xiazaiapp()"
            v-if="sys.app_url"
          >
            <div>
              <div class="flexcc">
                <img
                  src="https://file.91haoka.cn/xiaoluohao/xiaoluohaoapp2.png"
                  style="width: 24px; margin-bottom: 16px;"
                />
              </div>
              <div>下载APP</div>
            </div>
          </div>
        </div>

        <div
          style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700; margin-top: 40px;"
          class="flex"
        >
          <div>
            <img src="../../../static/img/index1.png" style="width: 22px; margin-right: 10px;" />
          </div>
          <div>实时数据</div>
        </div>
        <div class="flex">
          <div
            style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 15px; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">提交订单</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div style="font-size: 40px; margin-right: 10px;">{{all.allCount.count}}</div>
                <div style="position: relative; top: 15px;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">
                    <span v-if="all.allCount.inc >= 0">+</span>
                    {{all.allCount.inc}}
                  </div>
                </div>
              </div>
              <div>
                <img src="../../../static/img/index10.png" style="width: 60px;" />
              </div>
            </div>
            <div style="color: rgb(64, 66, 71);">
              分销商
              <span style="margin-left: 10px;">{{count.data.amount}}</span>
            </div>
          </div>
          <div
            style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 15px; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">审核通过</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div style="font-size: 40px; margin-right: 20px;">{{all.passCount.count}}</div>
                <div style="position: relative; top: 15px;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">
                    <span v-if="all.passCount.inc >= 0">+</span>
                    {{all.passCount.inc}}
                  </div>
                </div>
              </div>
              <div>
                <img src="../../../static/img/index9.png" style="width: 60px;" />
              </div>
            </div>
            <div style="color: rgb(64, 66, 71);">
              分销商
              <span style="margin-left: 10px;">{{count.data.deliver_amount}}</span>
            </div>
          </div>
          <div
            style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 15px; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">生产发货</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div style="font-size: 40px; margin-right: 10px;">{{all.produceCount.count}}</div>
                <div style="position: relative; top: 15px;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">
                    <span v-if="all.produceCount.inc >= 0">+</span>
                    {{all.produceCount.inc}}
                  </div>
                </div>
              </div>
              <div>
                <img src="../../../static/img/index8.png" style="width: 60px;" />
              </div>
            </div>
            <div style="color: rgb(64, 66, 71);">
              分销商
              <span style="margin-left: 10px;">{{count.data.opening_card_amount}}</span>
            </div>
          </div>
          <div
            style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-right: 15px; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">生产失败</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div style="font-size: 40px; margin-right: 10px;">{{all.failCount.count}}</div>
                <div style="position: relative; top: 15px;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">
                    <span v-if="all.failCount.inc >= 0">+</span>
                    {{all.failCount.inc}}
                  </div>
                </div>
              </div>
              <div>
                <img src="../../../static/img/index7.png" style="width: 60px;" />
              </div>
            </div>
            <div style="color: rgb(64, 66, 71);">
              分销商
              <span style="margin-left: 10px;">{{count.data.fail_amount}}</span>
            </div>
          </div>
          <div
            style="width: 295px; height: 160px; background: #fff; border-radius: 20px; padding: 20px; margin-bottom: 15px;"
          >
            <div style="color: rgb(120, 125, 133); font-size: 16px;">直属分销商</div>
            <div class="flexbc" style="margin: 10px 0;">
              <div class="flex">
                <div style="font-size: 40px; margin-right: 10px;">{{count.direct_count}}</div>
                <!-- <div style="position: relative; top: 15px;">
                  <div style="color: rgb(212, 215, 222); font-size: 12px; margin-bottom: 5px;">近3天</div>
                  <div style="color: rgb(252, 30, 53); font-size: 14px;">+100</div>
                </div>-->
              </div>
              <div>
                <img src="../../../static/img/index6.png" style="width: 60px;" />
              </div>
            </div>
            <div style="color: rgb(64, 66, 71);">
              所有分销商
              <span style="margin-left: 10px;">{{count.count}}</span>
            </div>
          </div>
        </div>

        <div class="flex" style="margin-top: 0px;">
          <div style="margin-right: 20px; ">
            <div
              style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700; margin-top: 40px;"
              class="flex"
            >
              <div>
                <img src="../../../static/img/index3.png" style="width: 22px; margin-right: 10px;" />
              </div>
              <div>最近一周订单统计</div>
            </div>
            <div
              style="width: 660px; height: 400px; background: rgb(255, 255, 255); border-radius: 20px;"
            >
              <tu></tu>
            </div>
          </div>
          <div style="margin-right: 20px;">
            <div
              style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700; margin-top: 40px;"
              class="flex"
            >
              <div>
                <img src="../../../static/img/index4.png" style="width: 22px; margin-right: 10px;" />
              </div>
              <div>推广商城监控</div>
            </div>
            <div
              style="width: 370px; height: 400px; background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;"
            >
              <div
                style="padding: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 10px; margin-bottom: 20px;"
              >
                <div class="flexbc" style="margin: 10px 0;">
                  <div>
                    <div style="font-size: 20px; margin-right: 10px;">{{fangke.page_yes_uv}}</div>
                    <div style="font-size: 16px; margin: 10px 15px 20px 0;">单链接访客数</div>
                    <div style="color: rgb(120, 125, 133); font-size: 14px;">
                      浏览量
                      <span style="margin-left: 10px;">{{fangke.page_yes_pv}}</span>
                    </div>
                  </div>
                  <div style="text-align: center;">
                    <img src="../../../static/img/zengzhang.png" v-if="fangke.page_pv_rate >= 0" />
                    <img src="../../../static/img/xiajiang.png" v-if="fangke.page_pv_rate < 0" />
                    <div
                      style="color: rgb(120, 125, 133); font-size: 14px; margin-top: 10px;"
                    >同比增长{{fangke.page_pv_rate}}%</div>
                  </div>
                </div>
              </div>
              <div
                style="padding: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 10px;"
              >
                <div class="flexbc" style="margin: 10px 0;">
                  <div>
                    <div style="font-size: 20px; margin-right: 10px;">{{fangke.store_yes_uv}}</div>
                    <div style="font-size: 16px; margin: 10px 15px 20px 0;">多商品访客数</div>
                    <div style="color: rgb(120, 125, 133); font-size: 14px;">
                      浏览量
                      <span style="margin-left: 10px;">{{fangke.store_yes_pv}}</span>
                    </div>
                  </div>
                  <div style="text-align: center;">
                    <img src="../../../static/img/zengzhang.png" v-if="fangke.store_pv_rate >= 0" />
                    <img src="../../../static/img/xiajiang.png" v-if="fangke.store_pv_rate < 0" />
                    <div
                      style="color: rgb(120, 125, 133); font-size: 14px; margin-top: 10px;"
                    >同比增长{{fangke.store_pv_rate}}%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div
              style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700; margin-top: 40px;"
              class="flex"
            >
              <div>
                <img src="../../../static/img/index5.png" style="width: 22px; margin-right: 10px;" />
              </div>
              <div>系统更新日记</div>
            </div>
            <div
              style="width: 470px; height: 400px; background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;"
            >
              <div
                style="padding: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241); border-radius: 10px; margin-bottom: 20px;"
                @click="go('/tongzhi')"
                v-for="item in tongzhilist"
                :key="item.id"
              >
                <div class="flexbc">
                  <div class="flex">
                    <div>
                      <img src="../../../static/img/index11.png" style="width: 20px;" />
                    </div>
                    <div style="color: rgb(0, 90, 255); margin-left: 10px;">{{item.version}}</div>
                  </div>
                  <div style="color: rgb(175, 179, 188); font-size: 12px;">{{item.created_at}}</div>
                </div>
                <div class="flexbc" style="padding: 10px 0; cursor: pointer;">
                  <div
                    style="color: rgb(2, 12, 29);overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width:340px;"
                  >{{item.title}}</div>
                  <div style="color: rgb(120, 125, 133);">></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <footers></footers> -->
      </div>
    </div>
    <el-dialog
      title="系统更新日记"
      :visible.sync="log2"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="800px"
    >
      <div>
        <div style="margin-bottom: 20px;">
          <span style="font-weight: bold; margin-right: 10px;">通知标题:</span>
          {{now.title}}
        </div>
        <div style="margin-bottom: 20px;">
          <span style="font-weight: bold; margin-right: 10px;">版本号:</span>
          {{now.version}}
        </div>
        <div style="margin-bottom: 20px;" v-html="now.content"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log2 = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="log"
      class="dd"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1078px"
    >
      <div style="background: #fff; padding: 40px;">
        <div style="font-size: 36px; margin-bottom: 40px;">小螺号分销业务开门红活动详情</div>
        <div>
          <div style="margin-bottom: 10px;">小螺号正式上线限时享公测期内三个月免订单费，并开启春节专属福利活动！！！</div>
          <div style="margin-bottom: 10px;">
            <b>活动名称：</b>分销业务开门红
          </div>
          <div style="margin-bottom: 10px;">
            <b>活动时间：</b>商家在注册开通小螺号系统后的一个月内
          </div>
          <div style="margin-bottom: 30px;">
            <b>活动内容：</b>商户注册开通小螺号分销系统发展自己的分销业务，在首月达到相应的订单数量和分销商数量即可获得奖励权益
          </div>

          <div style="margin-bottom: 10px;">
            <b>奖励条件（二选一）：</b>
          </div>
          <div style="margin-bottom: 10px;">1. 发展有效订单数大于200且分销商不低于20个，可以获得两个月系统免费时长</div>
          <div style="margin-bottom: 10px;">2. 发展有效订单数大于400且分销商不低于50个，可以免费提供一个API对接名额或四个月系统免费时长</div>
          <div style="margin-bottom: 10px;">3. 发展有效订单数大于800且分销商不低于80个，可以免费提供两个API对接名额或六个月系统免费时长</div>
          <div style="margin-bottom: 30px;">注：有效订单指订单发货后且成功激活的数量</div>

          <div style="margin-bottom: 10px;">
            <b>奖励兑换方式:</b>
          </div>
          <div style="margin-bottom: 30px;">商家在满足条件后，可以随时联系敢探号官方客服兑换，我们在核实情况真实性后发放权益。</div>

          <div style="margin-bottom: 10px;">
            <b>活动奖励权益解释：</b>
          </div>
          <div style="margin-bottom: 10px;">1、api接口免费对接：运营商或上游系统的API接口在敢探号系统上为您免费对接。</div>
          <div style="margin-bottom: 40px;">2、小螺号系统免费使用时长：在公测期（3个月）结束后，您可继续免费使用小螺号分销系统的时长。</div>
        </div>
        <div
          @click="log = false"
          style="border-radius: 10px; box-shadow: 0px 10px 20px 0px rgb(163, 207, 255); background: rgb(0, 90, 255); width: 199px; height: 52px; margin: 0 auto; cursor: pointer; line-height: 52px; text-align: center; color: #fff;"
        >关闭</div>
      </div>
    </el-dialog>

    <el-dialog
      title="下载APP"
      :visible.sync="applog"
      width="440px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="qrcode flexcc" ref="qrCodeUrlx" style="margin: 0 auto; max-width: 100%;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="applog = false">关闭</el-button>
        <el-button type="primary" @click="xiazaiapp2">下载</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import tu from "./dialog/yizhou.vue";
export default {
  name: "shangpinguanli",
  components: {
    left,
    tu,
    top,
    footers
  },
  data() {
    return {
      log2: false,
      now: "",
      all: {
        allCount: "",
        passCount: "",
        produceCount: "",
        failCount: ""
      },
      count: {
        count: "",
        data: ""
      },
      yizhou: "",
      tongzhilist: "",
      log: false,
      fangke: "",
      pagenum: "",
      pagenumShow: false,
      sys: "",
      applog: false
    };
  },
  // beforeRouteEnter(to, from, next) {
    //   if (from.path === "/login") {
    //     next();
    //   } else {
    //     if (isAuthenticated()) {
    //       next();
    //     } else {
    //       next("/login"); // 重定向到登录页面
    //     }
    //   }
    // },
  created() {
    this.getinfo();
    this.kucunwarning();

    axios.get("/api/base/info/get").then(response => {
      if (response.data.msg.code == 0) {
        this.sys = response.data.data;
      } else {
        this.$message.error(response.data.msg.info);
      }
    });
  },
  mounted() {
    this.checkAndRedirect();
    window.addEventListener("resize", this.checkAndRedirect);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.checkAndRedirect);
  },
  methods: {

    checkAndRedirect() {
      const redirectWidth = 750;
      if (window.innerWidth < redirectWidth) {
        this.$router.push("/page/homePage");
      }
    },
    xiazaiapp: function() {
      this.applog = true;
      this.$nextTick(() => {
        this.$refs.qrCodeUrlx.innerHTML = "";
        var qrcode = new QRCode(this.$refs.qrCodeUrlx, {
          text: this.sys.app_url + "?attname=", // 需要转换为二维码的内容
          width: 300,
          height: 300,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    xiazaiapp2: function() {
      location.href = this.sys.app_url + "?attname=";
    },

    xiangqing: function(item) {
      this.now = item;
      this.log2 = true;
    },
    openw2: function(item) {
      let url = location.origin + "/h5";
      // let url = location.origin + '/h5/order?shop_id=' + JSON.parse(localStorage.getItem('user')).id + '&id=' + item.id
      this.openw(url);
    },
    getinfo: function() {
      axios.get("/own/order/count").then(response => {
        if (response.data.msg.code == 0) {
          this.all = response.data.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });

      axios.get("/own/agent/count").then(response => {
        if (response.data.msg.code == 0) {
          this.count = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });

      axios.get("/api/sys/version/list?page=1&pageSize=3").then(response => {
        if (response.data.msg.code == 0) {
          this.tongzhilist = response.data.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });

      axios.get("/own/visitor/count").then(response => {
        if (response.data.msg.code == 0) {
          this.fangke = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    kucunwarning() {
      axios.get("/own/inventory/warn/list").then(response => {
        if (response.data.msg.code == 0) {
          console.log("response11111", response.data.data);
          if (response.data.data.page.total != 0) {
            this.pagenumShow = true;
            this.pagenum = response.data.data.page.total;
          }
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    //点击直接跳转到单商品页的库存不足列表
    clickKucun() {
      this.$router.push({
        path: "/shangpinguanli/zaishoushangpin",
        query: {
          nowtab: 2,
          inventory_low: "1"
        }
      });
    }
  }
};
</script>


<style scoped lang="less">
</style>
